<template>
    <div id="viewUserMap">
    </div>
</template>

<script>
    import AMap from 'AMap';
    export default {
        name: "viewUserMap",
        props: {
            markers: {
                type: Array,
                default: () => {
                    return[]
                }
            },
            showInfo: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return{
                map: null,
                MarkerArr: []
            }
        },
        watch: {
            markers(newValue) {
                this.$nextTick(() => {
                    this.map.clearMap();
                    this.MarkerArr = newValue.map((marker, index) => {
                        var MarkerItem = new AMap.Marker({
                            map: this.map,
                            direction: 'top', //设置文本标注方位
                            icon: require('../../assets/pin.svg'),
                            position: [marker.longitudeLng, marker.longitudeLat],
                            offset: new AMap.Pixel(-13, -30)
                        });
                        MarkerItem.setLabel({
                            offset: new AMap.Pixel(0, 15),  //设置文本标注偏移量
                            content: `<div class='map-info'>${marker.name}</div>`, //设置文本标注内容
                            direction: 'top' //设置文本标注方位
                        });
                        MarkerItem.on('click', e => {
                            this.setCenter(e)
                            this.showInfo(index)
                        });
                        return MarkerItem;
                    });
                    this.map.setFitView();
                });
            }
        },
        mounted() {
            this.map = new AMap.Map('viewUserMap', {
                zoomToAccuracy: true,
                zoom: 13,
                resizeEnable: true
            });
            this.map.on("complete", () =>{
                this.$emit('hideMapLoading')
            });
        },
        methods: {
            // 显示全部
            shrinkAll() {
                this.map.setFitView();
            },
            // 设置地图中心点
            setCenter(e) {
                if (Array.isArray(e)) {
                    this.$nextTick(() => {
                        let target = this.MarkerArr.find(value => {
                            let {lng, lat} = value.Ce.position;
                            if (e[0] === lng && e[1] === lat) {
                                return true;
                            }
                        })
                        this.map.setFitView([target]);
                    })
                }else {
                    this.$nextTick(() => {
                        this.map.setFitView([e.target]);
                    })
                }
            }
        }
    }
</script>

<style lang="less">
    .map-info {
        padding: .75rem 1.25rem;
        margin-bottom: 1rem;
        border-radius: .25rem;
        position: fixed;
        top: 1rem;
        background-color: white;
        width: auto;
        min-width: 22rem;
        border-width: 0;
        right: 1rem;
        box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    }

#viewUserMap{
    width: 100%;
    height: 100%;
    background: #cccccc;
}
.map-info{
    position: relative;
    top: 0;
    right: 0;
    min-width: 0;
    cursor: pointer;
}
.amap-marker-label{
    border: 0;
    background-color: transparent;
}
</style>
